<template>
	<view>
		<view class="continasfather">
		
			<view class="contains" >
				<!-- 数据筛选规则区域 -->
				<view class="sort-option-class">
					<view :class="{sort_option_active:sortOptionIndex==0}" class="integrationSort" @click="clickIntegration()">
						<!-- 综合排序 -->
						{{integrationTitle}}
						<image v-if="integrationFlag" src="../../static/images/integrationDown.png"></image>
						<image v-if="!integrationFlag" src="../../static/images/integrationTop.png"></image>
					</view>
					
					<!-- 单选排序 -->
					<view :class="{sort_option_active:sortOptionIndex==1}" @click="clickOnlySort(1)">销量高</view>
					<view :class="{sort_option_active:sortOptionIndex==2}" @click="clickOnlySort(2)">速度快</view>
					<view :class="{sort_option_active:sortOptionIndex==3}" @click="clickOnlySort(3)">津贴优惠</view>
					
					<!-- 筛选 -->
					<view class="integrationSort" @click="clickFilter()">
						筛选
						<image v-if="filterFlag" src="../../static/images/integrationDown.png"></image>
						<image v-if="!filterFlag" src="../../static/images/integrationTop.png"></image>
					</view>
				</view>
				
				<!-- 综合排序单选区域 -->
				<view v-if="integrationFlag">
					<block v-for="(item, index) in integrationItems" :key="index">
						<!-- 如果当前的综合排序的选项是当前索引下标的话就拥有被选择的样式 -->
						<view class="integrationItem-class" :class="{integrationActive:integrationIndex == index}" @click="clickIntegrationItem(item,index)">
							{{item.integrationItem}}
						</view>
					</block>
				</view>
			</view>
			
		</view>
<!-- 阴影面板充斥着整个屏幕 -->
		<view class="page_shadow" v-if="shadowFlag" @click="clickShadow()"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isUpOrDown: false ,// 是否上升或者下架
				shadowFlag: false, // 阴影面积
				integrationTitle: '综合排序', // 综合排序展示的标题
				sortOptionIndex: 0, // 排序选项的初始为选中第一个
				integrationFlag: false ,// 综合排序初始箭头
				filterFlag: true ,// 筛选
				integrationIndex: 0,
				// 综合排序的多个选项
				integrationItems: [
					{
						integrationItem: '综合排序',
						sortSign: '返回给后端排序的标志'
					},{
						integrationItem: '距离最近'
					},{
						integrationItem: '评分最高'
					},{
						integrationItem: '起送价最低'
					},{
						integrationItem: '人均高到低'
					},{
						integrationItem: '人均低到高'
					}

				]
				
			}
		},
	
		
		methods: {
			// 阴影面积被点击
			clickShadow() {
				this.integrationFlag = false;
				this.shadowFlag = false;
			},
			
			// 综合排序
			clickIntegration() {
				this.$parent.pagePoll();
				if(this.integrationFlag) { // 箭头向下，选项内容。不进行显示
					// this.sortOptionIndex = 0;
					this.clickShadow();
				} else { // 显示内容
					// this.sortOptionIndex = 0;
					this.integrationFlag = true;
					this.shadowFlag = true;
				}
			},
			// 单选选项 num为1，2，3。等于传过来的单选下标。改变排序选择的状态
			clickOnlySort(num) {
				this.sortOptionIndex = num;
				// 将综合下拉隐藏
				// this.integrationFlag = false;
				this.clickShadow();
			},
			
			// 综合单选排序的点击事件。 item 综合单选
			clickIntegrationItem(item,index) {
				// 将综合排序样式变为活跃状态样式
				this.sortOptionIndex = 0;
				// 改变排序的标题
				this.integrationTitle = item.integrationItem;
				// 改变综合选项的活跃下标
				this.integrationIndex = index;
				// 将综合下拉隐藏
				// this.integrationFlag = false;
				this.clickShadow();
				console.log(`当前的综合标题：${this.integrationTitle}`);
			},
			
			// 筛选排序
			clickFilter() {
				this.filterFlag = !this.filterFlag;
			}
		},
		
	}
</script>

<style scoped>
	
	.continasfather {
		/* z-index: 7777; */
		position:relative;
		z-index: 10000 !important;
		background-color: white;
		width: 100%;
		padding: 10upx 10upx 10upx 10upx;
	}
	
	.contains {
		position:relative;
		/* background-color: yellow; */
		/* 绝对定位 z-index: 99; */
		/* 层级进行提高 */
		z-index: 10000 !important;
		/* position: absolute; */
	}

 	
	/* 向上向下的图标大小 */
	image {
		width: 40upx;
		height: 40upx;
		/* z-index: 999; */
	}
	
	.sort-option-class {
		color: #666666;
		/* z-index: 9999; */
	}
	
	/* 排序被选中的字体样式 */
	.sort_option_active {
		color: black !important;
	}

	/* 排序选择的按钮选项的class */
	.sort-option-class {
		display: flex;  /* 盒子布局 */
		justify-content: space-between; /* 排在两边 */
	}
	
	/* 综合排序 */
	.integrationSort {
		display:flex;  /* 弹性盒子 */
		align-items: center; /* 居中对齐弹性盒 */
	}
	
	/* 综合排序的里面的选择的内容的样式 */
	.integrationItem-class {
		/* color: #666666;*/ /* 灰色 */ 
		border-bottom: 2rpx solid #ededed; 
		padding: 10upx 0 10upx 0; /* 底部的横线 */
	}
	
	/* 综合排序的里面的组件被选中后变化的样式 */
	.integrationActive {
		/* color: #66ff33; */ /*这个颜色还行*/
		color: #cccc00;  /*这个也还行*/
		/* color: #996633; */

	}
	
	/* 阴影部分面积 */
 	.page_shadow {
		top: 0;
		height: 100%;
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		background-color:rgba(12,30,27,0.5);
		opacity: 0.7;
		z-index: 1;
	} 
</style>
